<template>
  <div class="container">
    <div class="mask" />
    <video autoplay muted loop src="@/assets/video.mp4" />
    <el-card>
      <el-form ref="form" :model="loginForm" :rules="loginRules">
        <div class="form_img">
          <img src="@/assets/logo1.png" alt="">
        </div>
        <el-form-item prop="account">
          <el-input v-model="loginForm.account" prefix-icon="el-icon-s-custom" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" prefix-icon="el-icon-unlock" show-password placeholder="请输入密码" />
        </el-form-item>
        <el-form-item prop="code">
          <el-input v-model="loginForm.code" prefix-icon="el-icon-unlock" placeholder="验证码" />
          <span class="codePage" @click="getImgCode"><img :src="imgUrl" alt=""></span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
        </el-form-item>
        <el-form-item>
          <div class="login_remind">仅用于IT培训教学使用，为保障您的个人信息安全，请勿向平台录入任何个人敏感信息 (如手机号、身份证号等)!</div>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="copyright">江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2022 All Rights Reserved 苏ICP备16007882号-11</div>
  </div>
</template>

<script>
import { getImgCode } from '@/api/user.js'
import { debounce } from 'lodash'
export default {
  name: 'LoginPage',

  data() {
    return {
      imgUrl: '',
      loginForm: {
        account: process.env.NODE_ENV === 'development' ? 'demo' : '',
        password: process.env.NODE_ENV === 'development' ? 'hm#qd@23!' : '',
        code: '',
        key: Math.random()
      },
      loginRules: {
        account: [{
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        }, {
          pattern: /^\w{4,16}$/,
          message: '请输入6-16位用户名',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        }, {
          min: 6, max: 16,
          message: '请输入4-16位的密码',
          trigger: 'blur'
        }],
        code: [{
          required: true,
          message: '请输入验证码',
          trigger: 'blur'
        }, {
          min: 1, max: 3,
          message: '请输入正确的验证码',
          trigger: 'blur'
        }]
      }
    }
  },
  created() {
    this.getImgCode()
  },
  // 防抖2
  // mounted() {
  //   this.getImgCode = debounce(this.getImgCode, 500)
  // },
  methods: {
    async login() {
      try {
        await this.$refs.form.validate()
        await this.$store.dispatch('user/login', this.loginForm)
        // console.log('验证通过')
        if (this.$store.getters.token) {
          this.$router.push('/')
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 防抖1
    getImgCode: debounce(function() {
      getImgCode({ key: this.loginForm.key }).then((result) => {
        // blob要显示道页面上 =》 base64 图片字符串
        const fr = new FileReader()
        fr.onload = (e) => {
          this.imgUrl = e.target.result
        }
        fr.readAsDataURL(result) // 异步操作
      }).catch((error) => {
        console.log(error)
      })
    }, 500)
  }
}
</script>

<style lang="scss" scoped>
  .container{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  video{
    position: absolute;
  }
  .mask{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    opacity: .3;
    background: #1a1c41;
  }
    ::v-deep.el-card{
      position: absolute;
      // top: 50%;
      left: 50%;
      transform: translate(-50%,29%);
      width: 450px;
      height: 525px;
      // margin: 155px auto;
      border-radius: 10px;
      z-index: 1;
      .el-card__body{
        padding: 0;
      }
      .el-form{
        padding: 36px 40px 0 40px;
        .el-input__inner{
          height: 50px;
          .el-input__icon {
            line-height: 50px;
            width: 50px !important;
          }
        }
        .el-form-item:nth-child(5){
          margin-top: 44px;
          margin-bottom: 14px;
        }
        .login_remind{
          font-size: 14px;
          color: red;
        }
      }
      .form_img {
        display: flex;
        justify-content: center;
        margin-bottom: 32px;
        img{
          width: 196px;
          height: 54px;
        }
      }
    }
    ::v-deep.el-input--prefix .el-input__inner {
      padding-left: 45px
    }
    ::v-deep.el-input__icon{
      width: 40px;
    }
    ::v-deep.el-button--primary{
      width: 370px;
      height: 54px;
      span{
        font-size: 18px;
      }
    }
    .codePage{
      display:inline-block;
      width: 80px;
      height: 35px;
      // background-color: #ccc;
      position: absolute;
      right: 10px;
      top: 7px;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .copyright{
      position: absolute;
      bottom: 3%;
      left: 0%;
      width: 100%;
      opacity: 0.9;
      font-size: 14px;
      color: white;
      text-align: center;
    }
  }
</style>
